<template>
  <!--wheel是中间的滚轮-->
  <!--scroll是滚动事件-->
  <div id="div1" @wheel.passive="eventMethod">
    <ul>
      <li>rose</li>
      <li>mark</li>
      <li>jack</li>
      <li>lucy</li>
      <li>lili</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from "vue";
export default {
  setup() {
    //延时
    let sleep = (millSeconds) => {
      let time = new Date().getTime();
      while (new Date().getTime() <= time + millSeconds);
    };

    let eventMethod = (e) => {
      sleep(2000);
      console.log(e);
    };
    return { eventMethod };
  },
};
</script>
<style scoped>
#div1 {
  width: 300px;
  height: 100px;
  background: lightgoldenrodyellow;
  overflow: auto;
}

#div1 li {
  margin: 20px;
  background-color: aquamarine;
  height: 100px;
  width: 200px;
}
</style>
